<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HomePage</title>
    <meta charset="utf-8">
    <script src="http://cdn.dowebok.com/134/js/scrollReveal.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>
    <script src="http://www.gongjuji.net/Content/files/jquery.md5.js"></script>
    <script src="/resources/static/js/aes.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Base64/1.1.0/base64.min.js"></script>
    <script src="/resources/static/js/str2byte.js"></script>
    <script>
        function checkForm() {
            var RSACrypto = new JSEncrypt();
            var token = document.getElementById("token");
            var dataArr = token.value.split("-----");
            token.value = dataArr[0];
            var pub_key = dataArr[1];
            var input_pwd = document.getElementById('input_pwd');
            var encoded_pwd = document.getElementById('encoded_pwd');
            if(input_pwd==null){
                alert("error input");
                return false;
            }
            encoded_pwd.value = input_pwd;
            var obj = $("#test_form").serialize();
            var md5str = $.md5(obj);
            RSACrypto.setKey(pub_key);
            var signiture = RSACrypto.encrypt(md5str);
            <!--得到签名siguniture-->

            <!--生成动态AES密钥-->
            <!--首先获取uername-->
            var username = document.getElementById("userName").value;
            var timestamp = (new Date()).getTime();
            var timestamp1 = username+timestamp;
            var sourcekey = timestamp1.substring(0,16);


            <!--AES 加密 jsonstr -->
            var aesKey= sourcekey;
            var key = CryptoJS.enc.Utf8.parse(aesKey);
            var content = CryptoJS.enc.Utf8.parse(obj)
            var iv_tmp = stringToByte("12345678abcdefgh");
            var bodystr = CryptoJS.AES.encrypt(content, key, {
                <!--iv: iv_tmp,-->
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            });
            var bodystring=bodystr.toString();

            <!-- 获取AESKeyStr -->
            var AESKeyStr = btoa(aesKey);
            <!-- AESKeySecret -->
            var AESKeySecret = RSACrypto.encrypt(AESKeyStr);

            data = {"Authoration":signiture,"SecurityKey":AESKeySecret,"bodyStr":bodystring,"Timestamp":String(timestamp),"token":token.value};
            $.ajax({
                url: 'login',
                data: JSON.stringify(data),
                dataType: "html",
                type: "post",
                success: function(result) {
                    console.log(result)
                }
            });
        }


    </script>
    <style>
        * { margin: 0; padding: 0;}
        .dowebok { font-family: "Microsoft Yahei"; background-color: #202a39;}
        .dowebok h1 { margin: 80px 0 50px; font-size: 60px; font-weight: 500; color: #fff; text-align: center;}
        .dowebok h2 { margin: 10px 0; font-size: 24px; font-weight: 500; color: #616c84; text-align: center;}
        .dowebok .column-container { width: 80%; margin: 0 auto; padding-top: 100px; font-size: 0;}
        .dowebok .column { display: inline-block; width: 100px; margin: 0 20px; *display: inline; zoom: 1;}
        .dowebok .rowblock {display: inline-block; width: 400px; margin: 0 20px; *display: inline; zoom: 1;}
        .dowebok .block { margin-bottom: 45px; border-radius: 3px; overflow: hidden;}
        .dowebok .block_right {margin-top: 45px; border-radius: 3px; overflow: hidden;}
        .dowebok .block-1y { height: 250px;}
        .dowebok .block-2y { height: 350px;}
        .dowebok .block-3y { height: 600px;}
        .dowebok .block-1x { height: 180px;}
        .dowebok .block-2x { height: 240px;}
        .dowebok .block-3x { height: 300px;}
        .dowebok .menu-col { display: inline-block; width: 500px; margin: 0 20px; *display: inline; zoom: 1;}
        .block img {width: 100%; display: block;}
        .block-blueberry { background: #008597;}
        .block-slate { background: #2d3443;}
        .block-grape { background: #4d407c;}
        .block-raspberry { background: #ff005d;}
        .block-mango { background: #ffcc00;}
        .block-orange { background: #ff7c35;}
        .block-kiwi { background: #35ff99;}
        .block-1x:hover {
        	background: #008597;
       }
       .block-2x:hover {
       	background: #4d407c;
       }
       .block-3x:hover {
       	background: #ffcc00;
       }
       .box {
       	position: absolute;
       	top: 50%;
       	left: 50%;
       	transform: translate(-50%, -50%);
       	width: 100%;
       	padding: 40px;
       	background: #2d3443;
       	box-sizing: border-box;
       	box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
       	border-radius: 10px;
       /*登录窗口边角圆滑*/
       }
       .box h2 {
       	margin: 0 0 30px;
       	padding: 0;
       	color: #fff;
       	text-align: center;
       }
       .box .inputBox {
       	position: relative;
       }
       .box .inputBox input {
       	width: 100%;
       	padding: 10px 0;
       	font-side: 16px;
       	color: #fff;
       	letter-spacing: 1px;
       	margin-bottom: 30px;

       	border: none;
       	border-bottom: 1px solid #fff;
       	outline: none;
       	background: transparent;
       }
       

    </style>
</head>

<body class="dowebok">
<h1 data-scroll-reveal="enter from the top over 1.5s">Login From This Area</h1>
<div class="column-container clearfix">
    <!-- col 1 -->
    <div class="column">
        <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
        <div class="block block-2x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
        <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
        <div class="block block-3x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
        <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
        <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
    </div>

    <!-- col 2 -->
    <div class="column">
        <div class="block block-3x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
        <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
        <div class="block block-2x block-grape" data-scroll-reveal="enter top"></div>
        <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
        <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
        <div class="block block-2x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
    </div>

    <!-- col 3 -->
    <div class="column">
        <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
        <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
        <div class="block block-2x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
        <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
        <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
        <div class="block block-3x block-orange" data-scroll-reveal="enter left"></div>
    </div>

    <!-- col 4 -->
    <div class="column">
        <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
        <div class="block block-2x block-grape" data-scroll-reveal="enter top"></div>
        <div class="block block-3x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
        <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
        <div class="block block-2x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
        <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
    </div>
    
    <!-- col 5 -->
    <div class="rowblock">
    	<div class="block_right block-1y block-slate" data-scroll-reveal="enter left">
    		<div class="box">
            	<h2>login in</h2>
  				<form id='test_form' action="/login" method="post">
  				    <div class="input-group">
                        <span class="input-group-addon">userName</span>
                        <input type="text" class="form-control" id="userName" name="userName" placeholder="username">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">userName</span>
                        <input type="text" class="form-control" id="input_pwd" name="password" placeholder="password">
                    </div>
                    <input type='hidden' id='encoded_pwd' value=''/>
                    <input type="hidden" name="token" id="token" value="{{.}}"/>
                    <button type='button' class="btn btn-primary" onclick="checkForm()">Sign in</button>
	  			</form>
	  		</div>
    	</div>
    	<div class="block_right block-2y block-slate" data-scroll-reveal="enter left"></div>
    	<div class="block_right block-1y block-slate" data-scroll-reveal="enter left"></div>
    	<div class="block_right block-3y block-slate" data-scroll-reveal="enter left"></div>
    </div>

</div>
<script src="http://cdn.dowebok.com/134/js/scrollReveal.js"></script>
<script>
    (function(){
        window.scrollReveal = new scrollReveal({ reset: true, move: '50px'});
    })();
</script>
</body>

</html>